<!DOCTYPE HTML>
<html>
<head>
    <include file="Public/head"/>
</head>
<body>
<!-- 头部 -->
<include file="Public/header"/>
<!-- /头部 -->

<!-- 主体 -->


<!--特性介绍-->
<div class="container">
    <div class="row">
        <div class="col-md-3" style="margin: -15px">
            <div class="slide_title">产品服务套餐</div>
            <ul class="slide_menu">
                <volist name="artical_list" id="vo">
                    <li><a <if condition="$artical_id eq $vo['id']"> class="active"</if> href="{:U('Home/Index/products',array('id'=>$vo['id']))}">{$vo.title}</a></li>
                </volist>
            </ul>
        </div>
        <div class="col-md-9 product_main">
            {$artical.content}
        </div>
    </div>
</div>

<!-- /主体 -->

<!-- 底部 -->
<include file="Public/footer"/>
<!-- /底部 -->
</body>
</html>

<block name="script">
    <script>
        //实现翻屏按钮
        $(function () {
            $('#turn-screen').click(function () {
                var screen = $('html,body');
                screen.animate({scrollTop: $(this).offset().top + $(this).parent().height() + 20})
            })
        })

        //鼠标移动到特性介绍图片的时候显示文字
        $('.index-feature-table ul li').mouseenter(function () {
            var image = $(this).find('img');
            var caption = $(this).find('div');

            caption.width(image.width());
            caption.height(image.height());
            caption.animate({opacity: 1});
        }).mouseleave(function () {
                    var image = $(this).find('img');
                    var caption = $(this).find('div');

                    caption.width(image.width());
                    caption.height(image.height());
                    caption.animate({opacity: 0});
                });
    </script>
</block>